<template>
  <view class="protocol_box" @click.stop="agreeClick">
    <view class="select" :class="{active: agree}"></view>
    {{ leftFont }}
    <view v-for="(item, index) in protocol" :key="index">
      <text class="test" @click="protocolClick(item.id)">{{item.name}}</text>
      <span v-if="index < (protocol.length - 1)">和</span>
    </view>
  </view>
</template>

<script setup>
  const emit = defineEmits(['click']);
  const props = defineProps({
    leftFont: {
      type: String,
      default: '你已阅读同意'
    },
    // 是否同意
    agree: {
      type: Boolean,
      default: false
    },
    // 协议列表
    protocol: {
      type: Array,
      default: () => []
    }
  })
  function agreeClick(){
    emit('click')
  }
  function protocolClick(id){
    uni.navigateTo({
      url: `/pages/web?id=${id}`
    });
    console.log(`跳转id为${id}`);
  }
</script>

<style lang="scss" scoped>
  .protocol_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: 2%;
    width: 96%;
    font-size: 28rpx;
    color: #898989;
    font-size: 24rpx;
    .test{
      color: #E43222;
      white-space: pre-wrap;
      font-size: 24rpx;
    }
    .select {
      width: 30rpx;
      height: 30rpx;
      background-image: url("");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% auto;
      margin-right: 15rpx;
      &.active {
        background-image: url("");
      }
    }
  }
</style>